<template>
  <!-- <el-card shadow="never" style="border: none;  width: 100%;"> -->
  <div class="search-container">
    <p class="textitem flex-start" style="font-size: 18px; margin-bottom: 16px;">
      服务项目管理
    </p>
    <el-form class="search-form" @submit.prevent style="margin: 40px 0 20px;">
      <el-row :gutter="20">
        <el-col :span="18" class="no-padding">
          <el-row :gutter="16">
            <!-- 项目类型下拉框 -->
            <el-col :span="8">
              <el-form-item label="项目类型" style="padding-left: 12px;">
                <el-select v-model="formItem.type" style="width: 200px;" placeholder="请选择项目类型"
                  @change="findServiceItems" clearable>
                  <el-option v-for="item in uniqueTypes" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 项目名称输入框 -->
            <el-col :span="16">
              <el-form-item>
                <el-input v-model="formItem.name" style="width: 376px; " size="large" placeholder="请输入项目名称关键字"
                  :suffix-icon="Search" @keyup.enter.prevent="onSearch" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="6" class="flex-end">
          <router-link to="/data/serviceItem/add"> <el-button type="primary"
              style="margin-right: 12px;">新增服务项目</el-button></router-link>

        </el-col>
      </el-row>
    </el-form>
  </div>

  <!-- 表格 -->
  <el-table :data="tableData.rows"
    :header-cell-style="{ background: '#ccddff', fontWeight: 'normal', color: '#515a6e' }" style="font-size: 13px;">
    <el-table-column label="项目编号" prop="_id" min-width="100" align="center">
    </el-table-column>

    <el-table-column label="项目名称" prop="name" required align="center" />
    <el-table-column label="次数" align="center">
      <template #default="scope">
        <span style="color: #2984F8;">{{ scope.row.count || 2 }}</span>
      </template>
    </el-table-column>
    <el-table-column label="项目类型" prop="type" required align="center" />
    <el-table-column label="项目原价（元）" prop="price" header-cell-class-name="price-header" align="center">
      <template #default="scope">
        <span class="price-value">{{ (scope.row.price - 0).toFixed(2) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="项目介绍" prop="intro" min-width="200" align="center" />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <!-- <el-button link type="primary" @click="handleEdit(scope.row)">修改</el-button> -->
        <el-button link type="primary" @click="toUpdate(scope.row._id)">修改</el-button>
        <el-button link style="color:#FA7468;" plain @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <div v-if="pageData" class="flex-end" style="margin-top: 22px;">
    <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
      :total="tableData.total ?? 0" :page-sizes="[5, 10, 20, 40, 100]" background
      layout="total, sizes, prev, pager, next, jumper" />
  </div>
  <!-- </el-card> -->
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, computed, watch } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { deleteServiceItemsApi, findServiceItemsApi } from '@/api/service';
import { useRouter } from 'vue-router';

// 定义服务项目的类型
interface ServiceItem {
  _id: string;
  name: string;
  type: string;
  count: number;
  price: number;
  intro: string;
}

// 表格数据和分页数据
const tableData = reactive<{ rows: ServiceItem[]; total: number }>({ rows: [], total: 0 });
const pageData = ref({
  currentPage: 1,
  pageSize: 10
});

// 搜索表单数据
const formItem = ref({
  name: '',
  type: ''
});

// 计算属性：从表格数据中提取唯一的项目类型
const uniqueTypes = computed(() => {
  const types = new Set(tableData.rows.map(item => item.type));
  return Array.from(types);
});

// 初始化加载数据
onMounted(() => {
  findServiceItems();
});

// 查询服务项目数据
function findServiceItems() {
  findServiceItemsApi({
    // page: pageData.value.currentPage,
    // pageSize: pageData.value.pageSize,
    ...pageData.value,
    name: formItem.value.name,
    type: formItem.value.type
  }).then(res => {
    console.log('444', res);

    if (res.code === 200) {

      tableData.rows = res.data.rows;
      tableData.total = res.data.total;
    }
  });
}

// 搜索按钮点击事件
function onSearch() {
  findServiceItems();
}





function handleDelete(row: ServiceItem) {
  // 弹出确认框
  ElMessageBox.confirm(
    `确定删除此项目信息吗？`,
    '删除确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      deleteServiceItemsApi({ _id: row._id }).then(res => {
        if (res.code === 200) {
          tableData.rows = tableData.rows.filter(item => item._id !== row._id);
          ElMessage.success('删除成功');
        } else {
          ElMessage.error('删除失败');
        }
      }).catch(() => {
        ElMessage.error('删除失败，请重试');
      });
    })
    .catch(() => {
      ElMessage.info('已取消删除');
    });
}

const router = useRouter();
const toUpdate = (_id: string) => {
  router.push(`/data/serviceItem/update/${_id}`);

}

watch(pageData, () => {

  console.log(pageData.value);

  findServiceItems();

}, { deep: true });

</script>

<style scoped>
.el-input--large {
  --el-input-height: 32px;
}

.search-container {
  padding: 20px 0;
  background: #fff;
  border-radius: 4px;
}

.search-form .el-row {
  display: flex;
  align-items: center;
}

.search-form .el-col>.el-row {
  width: 100%;
}

.search-form .el-form-item {
  margin-bottom: 0 !important;
  margin-right: 15px;
}



.search-form .el-form-item__label {
  padding: 0 8px 0 0;
}

/* 表格样式 */
.textitem {
  position: relative;
  padding-left: 12px;
}

.textitem::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 20px;
  background-color: rgba(41, 132, 248, 1);
  border-radius: 8px;
}

.price-header .cell {
  color: #FA7468 !important;
  font-weight: bold;
}

.price-value {
  color: #FA7468;
  font-weight: bold;
}


.no-padding {
  padding-left: 0 !important;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

::placeholder {
  color: rgb(204, 204, 204);
}
</style>